import { DataViewerCommonRef, DataViewerProps } from "./interface";
import { Card, Image as AntdImage } from "antd";
import React, { ForwardedRef, forwardRef, useImperativeHandle } from "react";
import { completeImgUrl } from "../../utils/utils";
import { css } from "@emotion/react";

function Img(props: DataViewerProps, ref: ForwardedRef<DataViewerCommonRef>){
  const {datas,project } = props;

  useImperativeHandle<any,DataViewerCommonRef>(ref, () => {
    return {
      download: ()=>{
        datas.forEach(item=>{
          window.open(completeImgUrl(item.img))
        })
      },
    };
  }, []);

  return <div style={{padding: 24}}>
    <AntdImage.PreviewGroup items={datas.map(item=>completeImgUrl(item.img)!)}>
      {
        datas.map(childItem=>{
          return <Card styles={{
            body: {
              padding: 0
            }
          }} title={childItem.name} size="small" type="inner" key={childItem.img} css={css`
        & + &{
          margin-top: 24px;
        }
        .ant-image{
          width: 100%;
        }
      `}>
            <AntdImage src={completeImgUrl(childItem.img)}  />
          </Card>;
        })
      }
    </AntdImage.PreviewGroup>
  </div>
}
export default forwardRef(Img)

